<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useRoute } from 'vue-router';
import { ElMessageBox,ElMessage } from 'element-plus'
import { useCounterStore } from '../stores';

export default defineComponent({
    setup() {
        const store=useCounterStore()
        const spanTitle=ref([])
        const route=useRoute();
        const dialogVisible=ref(false)
        const perTitle=ref('')
        const userArray=ref([])
        const uploadImg=ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
        const {proxy}=getCurrentInstance()
        // const getPicture=(e)=>{
        //      //预览图片
		//       let src = window.URL.createObjectURL(e.target.files[0]);
		//       this.uploadImg.push(src);
		
		//       //将图片文件转化成base64格式图片
		//       var reader = new FileReader();
		//       reader.onload = (e) => {
		//         //e.target.result  就是从本地读取的图片的base64格式,将它上传给服务器即可
		//         //使用axios的post方法上传即可
		//       }
		//       reader.readAsDataURL(e.target.files[0])
        // }
        const addPage=()=>{
            dialogVisible.value=true
        }
        const addTitle=()=>{
            spanTitle.value=new Set([perTitle.value,...spanTitle.value])
            proxy.$http.post(`system/explain/`,{
                'userIds':[userArray.value.userId],
                'content':perTitle.value
            }).then(res=>{
                userDetail()
            })
            dialogVisible.value=false
        }
        const userDetail=()=>{
            
            proxy.$http.get(`/system/user/get/${route.query.userName}`)
            .then((res)=>{
                userArray.value=res.data[0]
                proxy.$http.get(`system/explain/list/${userArray.value.userId}`)
                .then(res=>{
                    console.log(res)
                    for(var i=0;i<res.data.length;i++){
                        spanTitle.value=new Set([res.data[i].content,...spanTitle.value])
                    }    
                })
            })
            
        }
        const editUser=()=>{
                    proxy.$http.put('/system/user',{
                        'userId':userArray.value.userId,
                        'userName':userArray.value.userName,
                        'nickName':userArray.value.nickName,
                        'sex':userArray.value.sex,
                        'email':userArray.value.email,
                        'phonenumber':userArray.value.phonenumber,
                    }).then((res)=>{
                        ElMessage({
                            showClose: true,
                            message: '密码重置成功,可以登录啦 ^.^',
                            type: 'success',
                        })
                        store.setUserName(userArray.value.userName)
                        userDetail()
                    }).catch((err)=>{
                        ElMessage({
                            showClose: true,
                            message: '密码重置失败,请联系客服 X.x',
                            type: 'error',
                        })
                })
        }
        userDetail()
        return{
            spanTitle,
            dialogVisible,
            userArray,
            perTitle,
            uploadImg,
            addPage,
            addTitle,
            editUser,
        }
    },
})

</script>

<template>
    <div>
        <div class="personalCenter">
            <el-container>
                <el-aside width="30%">
                <el-col :span="12">
                    <div class="sub-title"></div>
                    <div class="demo-basic--circle">
                    <div class="img hvr-grow" @click="callFile()">
                        <el-avatar
                        :size="70"
                        :src="uploadImg"
                        align="center"
                        type="file"
                        ></el-avatar>
                    </div>
                    <div class="block">
                        <span>{{userArray.userName}}</span>
                    </div>
                    </div>
                </el-col>
                <el-input
                    v-model="userArray.userId"
                    type="text"
                    placeholder="用户ID"
                    maxlength="6"
                    show-word-limit
                ></el-input>
                <el-input
                    v-model="userArray.nickName"
                    type="text"
                    placeholder="用户昵称"
                    show-word-limit
                ></el-input>
                <el-input
                    v-model="userArray.userName"
                    type="text"
                    placeholder="用户姓名"
                    show-word-limit
                ></el-input>
                <el-input
                    v-model="userArray.sex"
                    type="text"
                    placeholder="用户性别"
                    show-word-limit
                ></el-input>
                <el-input v-model="userArray.email" placeholder="邮箱">
                </el-input>
                <el-input
                    v-model="userArray.phonenumber"
                    type="text"
                    placeholder="手机号码"
                    maxlength="20"
                    show-word-limit
                ></el-input>
                <el-button-group style="float: right; padding: 3px 0" type="text">
                    <el-button type="primary" size="medium" round @click="editUser()">保存</el-button>
                </el-button-group>
                </el-aside>
                <el-main>
                    <el-card class="box-card">
                        <div>
                            
                            <div>
                                <span style="float: left;" shadow="hover"><b>个人说明</b></span>
                                <i class="iconfont icon-jiahao hvr-grow" style="float:right" @click="addPage()"></i>
                            </div>
                            <el-scrollbar height="400px">
                            <br />
                            <br />
                            <div v-for="(item,index) in spanTitle" :key="index">
                                <span>{{item}}</span>
                                <el-divider></el-divider>
                            </div>
                        </el-scrollbar>
                        </div>
                    </el-card>
                </el-main>
            </el-container>
        </div>
    </div>
    <el-dialog
        title="添加个人签名"
        width="30%" v-model="dialogVisible">
        <div>
        <tr>
            <el-input
                v-model="perTitle"
                :autosize="{ minRows: 2, maxRows: 1000 }"
                type="textarea"
                placeholder="在这里输入你的个人说明 ^.^"
            />
        </tr>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addTitle()">确 定</el-button>
        </span>
    </el-dialog>
</template>

<style scoped>
  .el-header {
    line-height: 100%;
    text-align: center;
    background-color: #b3c0d1;
  }
  .el-aside {
    line-height: 100%;
    text-align: center;
    background-color: #d3dce6;
  }
  .el-main {
    line-height: 100%;
    text-align: center;
    background-color: #e9eef3;
  }

  .demo-basic--circle {
    align: 'center';
    margin-top: 30px;
    margin-left: 150px;
  }
  .block {
    margin-left: 25px;
    font-weight: bold;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: auto;
    border-radius: 30px;
  }
  .personalCenter{
    height: 100%;
    width: 100%;
  }
</style>
